Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.
Что за свойство box-shadow?
Свойство box-shadow
позволяет добавить тень вокруг элемента на веб-странице. Тень подсказывает пользователю, является ли элемент — кнопка, картинка — интерактивным. Благодаря теням, вне экранов гаджетов мы получаем представление о размере и глубине объекта, и свойство box-shadow
добавляет реализм в оформление сайта.
Вот как обычно это свойство box-shadow
прописывают:
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5)
Первый четыре значения такие:
-
x-offset, определяет горизонтальное положение тени;
-
y-offset, определяет вертикальное положение тени;
-
радиус размытия, который влияет на резкость тени. Чем выше значение, тем менее насыщенные тени, и наоборот;
-
четвёртое значение определяет распространение тени.
Все значения, кроме радиуса размытия, могут быть